import React, { Component } from 'react';
import { MarkerMap } from '@/components/Charts';
import mapDataDetail from './markerMapData';
import hospitalData from './markerMapHospitalData';

export default class MarkerMapDemo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      areaNumber: '',
    };
  }

  componentWillMount() {
    const { areaNumber } = this.props;
    if (areaNumber) {
      this.setState({ areaNumber });
    }
  }

  onMapClick = areaNumber => {
    this.setState({ areaNumber });
    const { onMapClick } = this.props;
    if (onMapClick) {
      onMapClick(areaNumber);
    }
  };

  render() {
    const { areaNumber } = this.state;
    const { onMarkerClick } = this.props;

    return (
      <MarkerMap
        mapJson={mapDataDetail}
        hospitalData={hospitalData}
        areaNumber={areaNumber}
        width={600 * window.viewportScale}
        height={650 * window.viewportScale}
        onMapClick={this.onMapClick}
        onMarkerClick={onMarkerClick}
      />
    );
  }
}
